<template>
	<!-- 红包卡劵 -->
	<view class="redPacket">
		<view class="redPacket-filter">
			<uni-segmented-control :current="current" :values="items" active-color="#dd524d" @clickItem="onClickItem" style-type="text" />
		</view>

		<view class="redPacketList" v-if="couponList.length > 0">
			<view class="redPacket-item" v-for="(item, index) in couponList" :key="item.id">
				<hwxcRedPacketItem :couponInfo="item" @subCoupon="getsubCoupon()" />
			</view>
		</view>
		<u-empty mode="data" v-else icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		
		<view style="height: 200rpx;">
			
		</view>

		<view class="addAddress-btn" :style="bottomStyle">
			<u-button type="primary" color="#e43927" text="去领券" shape="circle" @click="gotoCoupon('/pages/couponCollection/couponCollection')"></u-button>
		</view>
	</view>
</template>

<script>
import hwxcRedPacketItem from '../../components/hwxcRedPacketItem/hwxcRedPacketItem.vue';
import { userMyCoupon } from '../../api/home/index.js';
export default {
	data() {
		return {
			items: ['待使用', '已使用'],
			current: 0,
			couponList: []
		};
	},

	components: {
		hwxcRedPacketItem
	},

	onShow() {
		this.getUserMyCoupon();
	},

	computed: {
		bottomStyle() {
			const systemInfo = uni.getSystemInfoSync();
			const { safeAreaInsets } = systemInfo;
			const bottomSafeAreaHeight = safeAreaInsets.bottom || 0;
			return `padding-bottom: ${bottomSafeAreaHeight ? bottomSafeAreaHeight + 'px' : '20rpx'}`;
		}
	},

	methods: {
		onClickItem(e) {
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex;
				this.getUserMyCoupon();
			}
		},

		// 获取卡券
		async getUserMyCoupon() {
			const resData = await userMyCoupon({
				status: this.current
			});
			this.couponList = resData.data;
		},

		gotoCoupon(url) {
			uni.navigateTo({
				url
			});
		},

		getsubCoupon() {
			uni.navigateTo({
				url: '/pages/shopping/shopping'
			});
		}
	}
};
</script>

<style scoped lang="scss">
.redPacket {
	.redPacket-filter {
		background-color: #fff;
		height: 80rpx;
		position: sticky;
		top: 0px;
		left: 0px;
		width: 100%;
	}
	.redPacketList {
		box-sizing: border-box;
		padding: 20rpx;
		.redPacket-item {
			background-color: #fff;
			border-radius: 10rpx;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			margin-bottom: 30rpx;
			border-left: 5px #e43927 solid;
		}
	}
	.cart-none {
		height: 400rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
		.cartImage {
			width: 200rpx;
			height: 200rpx;
		}

		.title {
			display: block;
			margin: 20rpx 0px;
			font-size: 28rpx;
		}
	}
}

.addAddress-btn {
	position: fixed;
	bottom: 0rpx;
	left: 0px;
	width: 100%;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 0px 20rpx;
	padding-top: 20rpx;
	background-color: #fff;
}
</style>
